<template>
  <div class="categoryContainer">
    <!-- 搜索框 -->
    <div class="search" @touchstart="toSearch">
      <svg
        t="1641111843136"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2137"
        width="32"
        height="32"
      >
        <path
          d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z"
          p-id="2138"
          fill="#cdcdcd"
        ></path>
      </svg>
      <input type="text" placeholder="请输入商品" disabled/>
    </div>
    <!-- 主体 -->
    <div class="mainContainer">
      <!-- 左边导航 -->
      <div
        class="left"
        :class="{ positionFixed: positionChange }"
       
      >
        <ul class="recommendList">
          <li
            class="recommendItem"
            v-for="(recommendItem, index) in categoryList"
            :key="recommendItem.category_id"
            @touchstart="recommendItemId = recommendItem.category_id"
            :class="{touch:recommendItemId === recommendItem.category_id }"
          >
            {{ recommendItem.category_name }}
          </li>
        </ul>
      </div>
      <!-- 右边内容 -->
      <div
        class="right positionChange"
        :class="{ positionFixed: !positionChange }"
       
      >
        <div class="top">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c7176304408eafb53d8889a9c61d11e7.png?w=734&h=220&bg=7F0000"
            alt=""
          />
          <div class="navRight">
            <ul class="slide-box">
              <li class="slide-item active" v-for="(item,index) in rightList.title_list" :key="index">{{item.title}}</li>
              
            </ul>
          </div>
        </div>
        <div class="rightList">
          <div class="rightItem" v-for="(item,index) in rightList.title_list" :key="index" >
            <h3>{{item.title}}</h3>
            <div class="detail">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                alt=""
              />
              <div class="detailRight">
                <div>Xiaomi Civi</div>
                <div>
                  <span>￥2499起</span>
                  <i>赠</i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Category",
  created() {
    this.$store.dispatch("getCategory");
  },
  computed: {
    ...mapState({
      categoryList: (state) => state.category.category,
    }),
    rightList(){

      return this.categoryList.find(item => item.category_id == this.recommendItemId)||{}
    }
  },
  data() {
    return {
      positionChange: true,
      recommendItemId:1242,
    };
  },
  methods: {
    toSearch(){
      this.$router.push("/search")
    }
  },
};
</script>

<style scoped lang="less">
.search {
  z-index: 999;
  position: -webkit-sticky;
  position: sticky;
  top: 0.2rem;
  margin: 0.2rem auto;
  width: 3rem;
  height: 0.32rem;
  border-radius: 0.33rem;
  background-color: #eee;
  display: flex;
  svg {
    flex: 7;
    width: 0.32rem;
    height: 0.32rem;
    margin: 0 0 0 0.05rem;
  }
  input {
    flex: 85;
    border-radius: 0.33rem;
    background-color: #eee;
    outline: none;
    border: none;
    padding-left: 0.1rem;
  }
}
.mainContainer {
  overflow: hidden;
  // position: relative;
  margin: 0.1rem 0.2rem 0 0;
  width: 3.4rem;
  height: 4.91rem;
  position: fixed;
  // display: flex;
  justify-content: space-between;
  .left {
    float: left;
    overflow: scroll;
    background-color: #fefefe;
    overflow-y: scroll;
    height: 5.2rem;
    width: 0.8rem;
    .recommendList {
      display: flex;
      flex-direction: column;
      .recommendItem {
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        height: 0.4rem;
        font-size: 0.14rem;
        line-height: 0.4rem;
        padding-left: 0.05rem;
      }
      .touch{
         font-weight: 700;
        border-left: 0.04rem solid #ff5934;
      }
    }
  }
  .right {
    overflow: hidden;
    height: 7rem;
    float: right;
    width: 2.5rem;
    margin: 0 0 0.2rem 0.2rem;
    overflow-y: scroll;
    left: 0;
    top: 0;
    .top {
      z-index: 989;
      background-color: white;
      position: -webkit-sticky;
      position: sticky;
      top: 0.01rem;
      img {
        width: 100%;
      }
      .navRight {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0.7rem !important;
        .slide-box {
          display: -webkit-box;
          box-orient: vertical;
          overflow-x: auto;
          /*适应苹果*/
          -webkit-overflow-scrolling: touch;
          border-bottom: 0.01rem solid #eee;
        }
        .slide-item {
          height: 0.2rem;
          margin: 0.1rem;
        }
        .active {
          background-color: #f8f8f8;
        }

        /*隐藏掉滚动条*/

        .slide-box::-webkit-scrollbar {
          display: none;
        }
      }
    }
    .rightList {
      overflow: hidden;
      margin-top: 0.1rem;
      .rightItem {
        margin-top: 0.07rem;
        margin-bottom: 0.3rem;
        width: 100%;
        height: 0.67rem;
        .detail {
          background-color: #f8f8f8;
          display: flex;
          img {
            width: 0.6rem;
            height: 0.6rem;
          }
          .detailRight {
            margin-left: 0.1rem;
            display: flex;
            height: 0.67rem;
            font-size: 0.14rem;
            flex-direction: column;
            justify-content: space-evenly;
            i {
              display: inline-block;
              margin-left: 0.1rem;
              color: #c69768;
              border: 0.01rem solid #c69768;
              padding: 0 0.05rem;
              height: 0.14rem;
              line-height: 0.14rem;
              text-align: center;
              border-radius: 0.03rem;
            }
          }
        }
      }
    }
  }
  .positionFixed {
    position: fixed;
  }
}
</style>